<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Banner图片切换</title>
<style>
    body {
        margin: 0;
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
    }
    #mask {
        position: relative;
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        overflow: hidden;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .center {
        position: relative;
        text-align: center;
    }
    .title {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        font-size: 24px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
    img {
        width: 100%;
        display: block;
    }
    .left, .right {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.5);
        border: none;
        cursor: pointer;
        padding: 10px;
        border-radius: 50%;
    }
    .left {
        left: 10px;
    }
    .right {
        right: 10px;
    }
    .left img, .right img {
        width: 20px;
        height: 20px;
    }
</style>
</head>
<body>
<div id="mask">
    <div class="center">
        <h2 class="title">天猫双十二惊喜袭来</h2>
        <img :src="images[currentIndex]" alt="" />
        <a href="javascript:void(0)" class="left" @click="prevImage">
            <img src="./images/left.png" alt="左箭头" />
        </a>
        <a href="javascript:void(0)" class="right" @click="nextImage">
            <img src="./images/right.png" alt="右箭头" />
        </a>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#mask",
        data: {
            images: [
                "https://www.helloimg.com/i/2024/12/20/6764cb0a774c1.jpg",
                "https://www.helloimg.com/i/2024/12/20/6764cb0aa4f2d.jpg",
                "https://www.helloimg.com/i/2024/12/20/6764cb0a9d793.jpg",
                "https://www.helloimg.com/i/2024/12/20/6764cb0ad3e05.jpg"
            ],
            currentIndex: 0
        },
        methods: {
            nextImage() {
                this.currentIndex = (this.currentIndex + 1) % this.images.length;
            },
            prevImage() {
                this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
            }
        }
    });
</script>
</body>
</html>